// 引入gulp，使用对象解构方法创建变量
const {
  src,
  dest,
  parallel,
  series,
  watch
} = require('gulp'),
  // css自动前缀插件
  autoprefixer = require('gulp-autoprefixer'),
  // 压缩css代码插件
  cleanCss = require('gulp-clean-css'),
  // 重命名插件
  rename = require('gulp-rename'),
  // 压缩js代码插件
  uglify = require('gulp-uglify'),
  // js代码转换插件
  babel = require('gulp-babel'),
  // 压缩html代码插件
  htmlmin = require('gulp-htmlmin'),
  // 压缩图片插件
  imagemin = require('gulp-imagemin'),
  // 引入服务器，并创建服务器
  browserSync = require('browser-sync').create()

// 第三方js文件直接流入dist任务
const cloneJs = () => {
  // 读取流
  return src('./src/js/*.min.js', {
      base: './src'
    })
    // 管道  写入流
    .pipe(dest('./dist'))
}
// 构建css文件
const css = () => {
  return src('./src/css/*.css', {
      // 以src目录为模版
      base: './src'
    })
    // 自动前缀
    .pipe(autoprefixer())
    // 压缩css
    .pipe(cleanCss())
    // 重命名
    .pipe(rename({
      // 更改后缀名
      extname: ".min.css"
    }))
    .pipe(dest('./dist'))
}
// 构建js文件
const js = () => {
  return src('./src/js/index.js', {
      base: './src'
    })
    // 转换js代码为ES5
    .pipe(babel({
      presets: ['babel-preset-env']
    }))
    // 压缩js代码
    .pipe(uglify())
    // 重命名
    .pipe(rename({
      extname: ".min.js"
    }))
    .pipe(dest('./dist'))
}
// 构建HTML文件
const html = () => {
  return src('./src/index.html', {
      base: './src'
    })
    // 压缩html代码，并且设置合并空白、压缩css和js代码
    .pipe(htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    }))
    .pipe(dest('./dist'))
}
// 构建图片文件
const img = () => {
  return src('./src/img/**', {
      base: './src'
    })
    // 压缩图片
    .pipe(imagemin())
    .pipe(dest('./dist'))
}
// 发布服务任务
const serve = () => {
  // 监听src目录文件变化
  watch('./src/css/**', css)
  watch('./src/img/**', img)
  watch('./src/js/**', js)
  watch('./src/index.html', html)
  // 服务器初始化
  browserSync.init({
    // 监听dist下面的所有文件
    files: './dist/**',
    // 禁用刷新提示信息
    notify: false,
    server: {
      // 参考根目录为dist目录
      baseDir: "./dist"
    }
  });
}
// 组合任务，并行执行克隆、css、js、html、img构建，之后串行执行发布服务
const go = series(parallel(cloneJs, css, js, html, img), serve)
// 导出任务go，其他不需要导出
module.exports = {
  go
}